<template>
	<view>
		<!-- <view style="width: 200rpx;">
		<u-button type="primary">主要按钮</u-button>
	</view> -->
		<view class="">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<u-index-list style="background-color: #87ceeb;" :scrollTop="scrollTop">
				<view v-for="(item, index) in indexList" :key="index">
					<u-index-anchor :index="item" />
					<view class="list-cell" @click="godetal">
						列表1
					</view>
					<view class="list-cell">
						列表2
					</view>
					<view class="list-cell">
						列表3
					</view>
				</view>
			</u-index-list>
		</view>
		<uni-utabbar path="sheshi_map"></uni-utabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U",
					"V", "W", "X", "Y", "Z"
				],
				list: [{
					name: '联系人'
				}, {
					name: '群组'
				}, {
					name: '组织',
					count: 5
				}],
				current: 0,
				// component:''
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			godetal() {
				uni.navigateTo({
					url:'/pages/waterSupply/lianxi/peopleinfo/peopleinfo' 
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>